<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部js文件 -->
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        #juansi{
            width: 400px;
            height: 300px;
            font-size: 30px;
            border: 1px solid blue;
            background-color: burlywood;
        }
    </style>

    <script>
        $(document).ready(function(){
            $("#hide_id").click(function(){
                // hide 隐藏
                // $("#juansi").hide();
                // $("#juansi").hide("slow");
                $("#juansi").hide(3000);
            });

            $("#show_id").click(function(){
                // show 显示
                // $("#juansi").show();
                $("#juansi").show("slow");
            });

            $("#toggle_id").click(function(){
                // toggle 切换显示和隐藏效果
                $("#juansi").toggle(2000);
            });

            // slideUp 向上滑动
            $("#slide_up_id").click(function(){
                $("#juansi").slideUp();
            });
            // 向下滑动
            $("#slide_down_id").click(function(){
                $("#juansi").slideDown();
            });
            // 切换向上或者向下滑动的效果
            $("#slide_toggle_id").click(function(){
                $("#juansi").slideToggle(2000);
            });

            // fadeOut 淡出
            $("#fade_out_id").click(function(){
                $("#juansi").fadeOut(2000);
            });
            //  fadeIn 淡入
            $("#fade_in_id").click(function(){
                $("#juansi").fadeIn(2000);
            });
            // fadeToggle 淡化效果切换
            $("#fade_toggle_id").click(function(){
                $("#juansi").fadeToggle(2000);
            });
             // fadeTo 透明度变化
             $("#fade_to_id").click(function(){
                $("#juansi").fadeTo(2000,0.5);
            });

            //
            $("#animate_id").click(function(){
                $("#juansi").animate({width:"600px",opacity:"0.8"});
                $("#juansi").animate({height:"500px",opacity:"0.5"});
                $("#juansi").animate({width:"400px",opacity:"0.3"});
                $("#juansi").animate({height:"300px",opacity:"1"});
            });


        });
    </script>

</head>
<body>
    <p>
        <button id="hide_id">Hide</button>
        <button id="show_id">Show</button>
        <button id="toggle_id">Toggle</button>

        <button id="slide_up_id">SlideUp</button>
        <button id="slide_down_id">SlideDown</button>
        <button id="slide_toggle_id">SlideToggle</button>

        <button id="fade_out_id">FadeOut</button>
        <button id="fade_in_id">FadeIn</button>
        <button id="fade_toggle_id">FadeToggle</button>
        <button id="fade_to_id">FadeTo</button>

        <button id="animate_id">Animate</button>
    </p>
    
 
    <div id="juansi">
        我的室友都睡觉，我偷偷把他们手机拿过来关掉闹钟，
        明天一早我一个人起来上课，卷死他们！！！
    </div>
</body>
</html>